<template>
  <div class="login-container">
    <el-form class="login-form" autoComplete="on" :model="loginData" :rules="loginRules" ref="formRef"
      style="border-radius: 5px">
      <div>
        <div class="logo"></div>
        <h3 class="title">X-View脚手架示例管理系统</h3>
      </div>
      <el-form-item prop="userName">
        <el-input type="text" name="userName" placeholder="登录账号" :prefix-icon="ButtonIcons.user"
          v-model="loginData.userName"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input :type="props.showPwd ? 'text' : 'password'" name="password" placeholder="登录密码"
          v-model="loginData.password" :prefix-icon="ButtonIcons.lock" @keyup.enter.native="handleLogin">
          <template #suffix>
            <el-tooltip class="item" effect="dark" :content="props.showPwd ? '隐藏密码' : '显示密码'" placement="right">
              <el-icon @click="props.showPwd = !props.showPwd">
                <View v-if="!props.showPwd" />
                <Hide v-if="props.showPwd" />
              </el-icon>
            </el-tooltip>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" class="submit" :loading="props.loginPending" @click.native.prevent="handleLogin">
          登 录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { FormInstance } from 'element-plus'
import router from '~/router'
import { LoginService } from '~/service/login'
import { userStore } from '~/store'
import { ButtonIcons } from '~/components/xview/button'
import { View, Hide } from '@element-plus/icons-vue'

const props = reactive({
  loginPending: false,
  showPwd: false
})

const loginData = reactive({
  userName: '',
  password: ''
})

const loginRules = reactive({
  userName: {
    required: true,
    trigger: 'blur',
    validator: (rule: any, value: any, callback: any) => {
      if (!value || value.length < 4) {
        callback(new Error('用户名不能小于4位'))
      } else {
        callback()
      }
    },
    password: {
      required: true,
      trigger: 'blur',
      validator: (rule: any, value: any, callback: any) => {
        if (!value || value.length < 4) {
          callback(new Error('密码不能小于6位'))
        } else {
          callback()
        }
      }
    }
  }
})

const formRef = ref<FormInstance>()

const handleLogin = async () => {
  let result = await formRef.value?.validate()
  if (!result) return
  props.loginPending = true
  const loginResult = await LoginService.login(loginData.userName, loginData.password)
  props.loginPending = false
  if (typeof loginResult == 'string') {
    //错误
  } else {
    const user = userStore()
    user.init(loginResult, true)
    router.push({ path: '/index' })
  }
}

//如果进入了登录界面，不管什么原因，一律清除本地缓存
const user = userStore()
user.logout(false)
</script>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #204e6d url('~/assets/background.jpg') 0 0 no-repeat;

  .login-form {
    display: block;
    margin: 15vh auto 0;
    padding: 20px 30px 60px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    color: #f9f9f9;
    background-color: rgba(11, 56, 85, 0.5);

    .logo {
      background: url('~/assets/logo-s.png') center 0 no-repeat;
      background-size: 60px;
      height: 60px;
    }

    h3 {
      font-size: 26px;
      font-weight: 200;
      letter-spacing: 2px;
      margin-bottom: 26px;
    }

    input {
      background: transparent;
      color: #f9f9f9;
      border-color: rgba(255, 255, 255, 0.4);

      &:focus {
        background-color: rgba(11, 56, 85, 0.2);
        border-color: rgba(255, 255, 255, 0.6);
      }

      &.is-error {
        border-color: #ff9595;
      }
    }

    .ep-form-item {
      margin-bottom: 25px;
    }

    :deep(.ep-form-item__error) {
      color: #ff9595;
    }

    .fa {
      color: #f9f9f9;
    }

    .submit {
      width: 100%;
      font-size: 16px;
    }
  }
}
</style>
